<template>
  <div class="container">
    <div class="title">
      <h2>房产管理</h2>
      <h5>用于展示房产列表信息，以户为单位</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-row :gutter="15" class="searchForm">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="97px"
          label-position="top"
        >
          <el-row type="flex" justify="start" class="search">
            <!-- 小区名称 -->
            <el-col :span="4">
              <el-form-item label="小区名称">
                <el-select
                  v-model="formData.community_code"
                  placeholder="请输入"
                  clearable
                  size="small"
                  :style="{ width: '100%' }"
                  @change="addBuilding"
                >
                  <el-option
                    v-for="(item, index) in selectedAll"
                    :key="index.id"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 栋数 -->
            <el-col :span="4">
              <el-form-item label="栋数">
                <el-select
                  v-model="formData.building_code"
                  placeholder="请输入"
                  clearable
                  size="small"
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in buildingHouse"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 单元数 -->
            <el-col :span="4">
              <el-form-item label="单元数">
                <el-input
                  v-model="formData.unit"
                  placeholder="请输入"
                  clearable
                  size="small"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-col>
            <!-- 楼层 -->
            <el-col :span="4">
              <el-form-item label="楼层">
                <el-input
                  v-model="formData.floor"
                  placeholder="请输入"
                  clearable
                  size="small"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-col>
            <!-- 房产名称 -->
            <el-col :span="4">
              <el-form-item label="房产名称">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入"
                  clearable
                  size="small"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-col>
            <!-- 户主姓名 -->
            <el-col v-if="!seShow" :span="4">
              <el-form-item label="户主姓名">
                <el-input
                  v-model="formData.owner_name"
                  placeholder="请输入"
                  clearable
                  size="small"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-col>
            <!-- 联系方式 -->
            <el-col v-if="!seShow" :span="4">
              <el-form-item label="联系方式">
                <el-input
                  v-model="formData.owner_tel"
                  placeholder="请输入"
                  clearable
                  size="small"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-col>
            <!-- 入住时间 -->
            <el-col v-if="!seShow" :span="4">
              <el-form-item label="入住时间">
                <el-date-picker
                  v-model="value"
                  value-format="timestamp"
                  type="daterange"
                  size="small"
                  format="yyyy-MM-dd"
                  :style="{ width: '100%' }"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  range-separator="-"
                  clearable
                  @change="changeTime"
                />
              </el-form-item>
            </el-col>

            <!-- 重置,查询 -->
            <el-col
              :span="4"
              :offset="offset"
              style="padding-left: 12px; padding-right: 12px; text-align: end"
            >
              <div class="right-btn">
                <el-form-item class="botn">
                  <el-button @click="onReset">重置</el-button>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <div class="packup" @click="packUp">
                  <span>{{ !seShow ? "收起" : "下拉" }}</span>
                  <span v-if="!seShow"><i class="el-icon-arrow-up" /></span>
                  <span v-else><i class="el-icon-arrow-down" /></span>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-card>
    <!-- 表格区域 -->
    <el-card class="tableCard">
      <el-button
        style="float: right; padding: 10px 20px; margin-right: 80px"
        type="primary"
        size="small"
        :disabled="!checkBtnPermission('/house/index','create')"
        @click="$refs.addForm.diailogShow = true"
      >新增项目</el-button>
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="community.name" label="小区名称" width="100" />
        <el-table-column prop="unit" label="栋数" width="100" />
        <el-table-column prop="rooms" label="单元数" width="100" />
        <el-table-column prop="code" label="房产编号" />
        <el-table-column prop="name" label="房产名称" />
        <el-table-column prop="owner_name" label="户主姓名" />
        <el-table-column prop="owner_tel" label="联系方式" width="100" />
        <el-table-column prop="floor" label="房间数" width="100" />
        <el-table-column prop="desc" label="描述" width="90" />
        <el-table-column prop="enter_time" label="入住时间">
          <template slot-scope="scope">
            {{ scope.row.enter_time | conversion }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              :disabled="!checkBtnPermission('/house/index','update')"
              @click="handleClick(row.id)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              :disabled="!checkBtnPermission('/house/index','destroy')"
              @click="delRow(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 页面渲染 -->
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          :page-sizes="[5,10, 15, 20, 30]"
          :page-size="formData.pageSize"
          :current-page="formData.current"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </el-card>
    <addForm ref="addForm" @updataList="initData" />
  </div>
</template>
<script>
import { getHouseInfo, communityInfo, buildingHouse, delHouseInfo, getHouseInfoByid } from '@/api/house/house_index'
import addForm from './components/index.vue'
export default {
  name: 'House',
  components: {
    addForm
  },
  // 表单时间过滤器
  filters: {
    // 3.定义一个处理函数，参数value为要处理数据
    conversion: function(value) {
      // 调用Date的方法，处理时间戳
      return new Date(value).toLocaleString()
    }
  },
  props: [],
  data() {
    return {
      // 表单值
      formData: {
        current: 1,
        pageSize: 10,
        enter_time: '', // 入住时间
        community_code: '', // 下拉框
        building_code: '', // 楼栋数
        unit: '', // 单元数
        floor: '', // 楼层
        name: '', // 房产名称
        owner_name: '', // 户主姓名
        owner_tel: ''// 联系方式
      },
      count: 0,
      value: '', // 获取时间
      // 校验
      rules: {
        field105: [
          {
            required: true,
            message: '请选择小区名称',
            trigger: 'change'
          }
        ],
        field101: [
          {
            required: true,
            message: '请输入设备名称',
            trigger: 'blur'
          }
        ],
        field107: [
          {
            required: true,
            message: '购买日期不能为空',
            trigger: 'change'
          }
        ]
      },

      // 控件显示隐藏
      seShow: true,
      offset: 0,
      list: [], // 表个数据
      selectedAll: [], // 下拉框获取
      buildingHouse: [] // 根据下拉框找栋数

    }
  },
  computed: {},
  watch: {},
  created() {
    this.initData()
    this.communityInfo()
  },
  mounted() {},
  methods: {
    // 删除
    async delRow(rowId) {
      console.log('1111', rowId)
      // 弹出确认框
      await this.$confirm('确认删除吗')
      // 发生删除请求
      const { data } = await delHouseInfo(rowId)
      // 提示成功
      // console.log(data.success)
      if (!data.success) {
        return this.$message.error(data.msg)
      }
      this.$message.success('删除成功')
      // 列表更新
      this.initData()
    },
    // 编辑
    async handleClick(rowId) {
      const res = await getHouseInfoByid(rowId)
      // console.log(res)
      this.$refs.addForm.quartData = res.data.data
      // console.log('156132', res.data.data.community_code)
      this.$refs.addForm.addBuilding(res.data.data.community_code)
      this.$refs.addForm.diailogShow = true
    },
    // 查询数据
    onSubmit() {
      this.initData()
    },
    // 头部收起
    packUp() {
      this.seShow = !this.seShow
      this.offset = this.seShow ? 0 : 12
    },
    // 表格值获取渲染
    async initData() {
      const res = await getHouseInfo(this.formData)
      // console.log('我是获取1111', res)
      // console.log('我是获取', res.data.data)
      this.list = res.data.data.rows
      this.count = res.data.data.count
    },
    // 下拉框
    async communityInfo() {
      const { data } = await communityInfo()
      // console.log('社区', data.data)
      this.selectedAll = data.data
    },
    // 根据下拉框找到楼栋数
    async addBuilding(value) {
      this.$set(this.formData, 'building_code', '')
      // console.log('我拿到了value', value) // 我拿到了value CM-cb4298fc-7bf3-4b46-89f7-c125b4b1b095
      const res = await buildingHouse(value)
      // console.log('获取1111', res.data.data)
      this.buildingHouse = res.data.data
    },
    // 创建时间,拿到表单数据
    // 创建时间获取 时间数据处理
    changeTime(value) {
      console.log('1111', value)
      const temp = []
      temp.push(value[0])
      temp.push(value[1])
      this.formData.enter_time = temp.join(',')
    },
    // 点击切换页数
    handleCurrentChange(val) {
      this.formData.current = val
      this.initData()
    },

    // 点击切换数量
    handleSizeChange(val) {
      this.formData.pageSize = val
      this.initData()
    },
    // 搜索重置
    onReset() {
      // 重置搜索表单
      this.formData = {
        current: 1,
        pageSize: 10,
        enter_time: '', // 入住时间
        community_code: '', // 下拉框
        building_code: '', // 楼栋数
        unit: '', // 单元数
        floor: '', // 楼层
        name: '', // 房产名称
        owner_name: '', // 户主姓名
        owner_tel: ''// 联系方式
      }
      this.value = ''
      // 拉取列表
      this.initData()
    }

  }
}
</script>
<style lang="scss" scoped>
.searchForm {
  .search {
    flex-wrap: wrap;
    .el-col {
      padding: 0 10px;
    }
    .right-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .botn {
        display: flex;
        align-items: flex-end;
        height: 100%;
        .el-button {
          display: block;
          margin-top: 5px;
          margin-left: 0;
          margin-right: 0;
        }
      }
      .packup {
        cursor: pointer;
        color: #1890ff;
      }
    }
  }
}
.container {
  padding: 40px;
  .title {
    display: flex;
    align-items: center;
    h2 {
      margin-right: 20px;
    }
    h5 {
      font-weight: 400;
      color: #9c9c9d;
      vertical-align: middle;
    }
  }
  .demo-form-inline {
    display: flex;
  }
  // .el-form-item {
  //   margin-right: 73px;
  // }
  .btn {
    padding-top: 40px;
  }
  .box-card {
    margin-bottom: 10px;
  }
}

// .block{
//   margin-top: 30px;
//   text-align: right;
// }
</style>
